<template>
	<div
		class="h-full flex flex-col justify-between gap-4 pt-8 md:pt-0 cursor-pointer relative"
	>
		<div>
			<div class="text-xl font-bold mb-2">图生视频</div>
			<ModelSelect v-model="model" />
		</div>

		<div class="flex-1 shrink-0 overflow-y-auto scrollable">
			<FileUpload v-model="imageUrl" />
			<div class="my-4">
				<TipTextarea v-model="prompt" />
			</div>
			<RadioSelect v-model="config" />
		</div>

		<div
			class="fixed left-0 right-0 bottom-0 z-10 p-2 bg-white md:bg-transparent md:static"
		>
			<el-button
				type="primary"
				color="#6B5CFF"
				class="w-full"
				style="height: 52px; font-size: 16px; font-weight: bold"
				@click="handleSubmit"
				:disabled="!prompt || prompt.length > 2000 || !imageUrl"
			>
				<i class="iconfont icon-aishengcheng mr-2"></i>
				生成
			</el-button>
			<div class="text-[12px] text-center mt-2">由AI生成。请负责任地使用。</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { bus } from '@/utils/eventBus'
import ModelSelect from './ModelSelect.vue'
import FileUpload from './FileUpload.vue'
import TipTextarea from './TipTextarea.vue'
import RadioSelect from './RadioSelect.vue'
import { useUserStore } from '@/stores'
import { imageToVideo } from '@/api'
import { ElMessage } from 'element-plus'

const { userInfo, getUserInfo } = useUserStore()

const model = ref(361)
const imageUrl = ref('')
const prompt = ref('')
const config = ref({
	resolution: '1080p',
	aspect_ratio: '16:9',
	duration: '4s',
})

const handleSubmit = async () => {
	if (!userInfo.name) return bus.emit('login')

	const formData = {
		model: model.value,
		image_url: imageUrl.value,
		prompt: prompt.value,
		...config.value,
	}
	const res = await imageToVideo(formData)

	if (res.msg) return ElMessage.error(res.msg)

	bus.emit('videoList', res)
	getUserInfo()
}
</script>

<style scoped lang="scss">
.iconfont {
	font-size: 16px;
}
</style>
